import React, { useEffect, useState } from "react";
import { Button, Tabs } from "antd-mobile";
import { request } from "../../utils/request";
import "./style.scss";
import Cal from "../../components/Cal";
import { useNavigate } from "react-router-dom";
import ListItem from "../../components/ListItem";
const Home = () => {
  const [keywords, setKeywords] = useState("");
  const [startTime, setStartTime] = useState("");
  const [endTime, setEndTime] = useState("");
  const [city, setCity] = useState(localStorage.getItem("city") || "北京");
  const [list, setList] = useState([]);
  const [showCal, setShowCal] = useState(false);
  const navigate = useNavigate();
  const onHandleOk = (value) => {
    console.log(value);
    setStartTime(value.startTime);
    setEndTime(value.endTime);
    setShowCal(false);
  };
  const getList = async () => {
    const resp = await request.post("actor/list", {
      keywords,
      startTime,
      endTime,
      city,
    });
    console.log(resp.data.data);
    setList(resp.data.data);
  };

 
  useEffect(() => {
    getList();
  }, [keywords, startTime, endTime]);

  useEffect(() => {
    // 轮训
    const timer = setInterval(() => {
      getList();
    }, 3000);
  }, [])
  return (
    <div>
      <Tabs>
        <Tabs.Tab title="全部" key={"全部"}></Tabs.Tab>
        <Tabs.Tab title="演唱会" key={"演唱会"}></Tabs.Tab>
        <Tabs.Tab title="音乐会" key={"音乐会"}></Tabs.Tab>
        <Tabs.Tab title="话剧" key={"话剧"}></Tabs.Tab>
        <Tabs.Tab title="美术展馆" key={"美术展馆"}></Tabs.Tab>
        <Tabs.Tab title="相声" key={"相声"}></Tabs.Tab>
      </Tabs>
      <div>
        <Button onClick={() => setShowCal(true)}>选择时间</Button>
        <Button onClick={() => navigate("/cityList")}>{city}</Button>
      </div>
      {showCal && <Cal onHandleOk={onHandleOk}></Cal>}
      <div className="list">
        {list.map((v, i) => {
          return (
            <ListItem key={i} v={v}></ListItem>
          );
        })}
      </div>
    </div>
  );
};

export default Home;
